<template>
  <view class="home">
    <view class="bg"></view>
    <view class="iou">
      <view class="left">
        <view class="title"> 借条</view>
        <view class="sub-title"> 更合规才放心</view>
      </view>
      <view class="right"></view>
    </view>
    <view class="state">
      <view class="icon"></view>
      <view class="txt"> 签署待确认 </view>
    </view>
    <view class="list">
      <view class="item">
        <view class="left">
          <view class="left-img"></view>
          <view class="names">
            <view class="name">
              <view class="key"> 发起人:</view>
              <view class="val"> 张三</view>
            </view>
            <view class="name">
              <view class="key"> 发起时间:</view>
              <view class="val"> 2024/03/15</view>
            </view>
          </view>
        </view>
        <view class="right-btn in"> 借款</view>
      </view>
      <view class="item">
        <view class="left">
          <view class="left-img out"></view>
          <view class="names">
            <view class="name">
              <view class="key"> 发起人:</view>
              <view class="val"> 张三</view>
            </view>
            <view class="name">
              <view class="key"> 发起时间:</view>
              <view class="val"> 2024/03/15</view>
            </view>
          </view>
        </view>
        <view class="right-btn out"> 借款</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HelloWorld',

  data() {
    return {
      datalist: [] // 定义数据
    }
  },

  created: function () {
    this.getData() // 调用方法 --> 手动刷新
  },

  methods: {
    // npm i axios vue-axios --> 两个依赖
    getData() {
      this.axios
        .get('http://localhost:48080/app-api/loan/filelist/select')
        .then(resp => {
          this.datalist = resp.data // 上面用prop 接收 --> 第三步 给datalist 赋值

          console.log(resp.data)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@function rpx($num) {
  @return $num + rpx;
}

.home {
  font-size: rpx(30);
}

.bg {
  width: 100%;
  height: rpx(558);
  background: url('../../static/images/home/bg.png') no-repeat;
  background-size: 100% 100%;
}

.iou {
  height: rpx(231);
  width: rpx(714);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  border-radius: rpx(38);
  background: #2a82e4;
  color: #fff;
  position: relative;
  top: rpx(-100);

  .left {
    .title {
      font-size: rpx(60);
      padding: 0 rpx(60);
    }

    .sub-title {
      font-size: rpx(38);
      padding: rpx(10) rpx(60);
    }
  }

  .right {
    width: rpx(123);
    height: rpx(98);
    margin-right: rpx(20);
    background: url('../../static/images/home/share.png') no-repeat;
    background-size: 100% 100%;
  }
}

.state {
  display: flex;
  height: rpx(48);
  width: rpx(715);
  margin: rpx(60) auto;
  align-items: center;
  background: #f7f7f7;
  position: relative;
  top: rpx(-100);
  border-radius: rpx(10);

  .icon {
    width: rpx(36);
    height: rpx(36);
    background: url('../../static/images/home/state.png') no-repeat;
    background-size: 100% 100%;
    margin: 0 rpx(30);
  }
}

.list {
  position: relative;
  top: rpx(-100);
  width: rpx(696);
  margin: rpx(30) auto;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e3effa;
    padding: rpx(30);
    border-radius: rpx(30);
    margin: rpx(30) 0;

    .left {
      display: flex;
      align-items: center;

      .left-img {
        width: rpx(78);
        height: rpx(70);
        background: url('../../static/images/home/user1.png') no-repeat;
        background-size: 100% 100%;

        &.out {
          background: url('../../static/images/home/user2.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .names {
        padding-left: rpx(20);

        .name {
          display: flex;

          .key {
            margin-right: rpx(6);
          }
        }
      }
    }

    .right-btn {
      padding: rpx(6) rpx(70);
      border-radius: rpx(999);
      color: #fff;

      &.in {
        background-color: #2a82e4;
      }

      &.out {
        background-color: #ff8d1a;
      }
    }
  }
}
</style>
